<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>表单页面</title>
    <link rel="stylesheet" href="/static/component/pear/css/pear.css" />
</head>

<body>
    <form class="layui-form" id="formId">
          <div class="layui-form">
            <div class="mainBox">
                <div class="main-container">
                    <table class="layui-table">
                         <colgroup>
           <col width="100">
           <col width="200">
           <col width="100">
           <col width="100">
          </colgroup>

          <thead>
           <tr>
            <th>序号</th>
            <th>套餐名称</th>
            <th>天数</th>
            <th>金额(￥)</th>
           </tr>
           
          </thead>
          <tbody id="pxtbodyId">
            {volist name="lst" id="vo"}
           <tr class="tr_classl" data-id="{$vo.id}">
            <td>{$i}</td>
            <td>{$vo.name}</td>
            <td>
               {$vo.day_num}天
            </td>
            <td>
                {$vo.price}
             </td>
           </tr>
            {/volist}

          </tbody>
         </table>
        </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="button-container">
                <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
                    lay-filter="form-save">
                    <i class="layui-icon layui-icon-ok"></i>
                    提交
                </button>
                <button type="reset" class="pear-btn pear-btn-sm">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
            </div>
        </div>
    </form>
    <script src="/static/user/js/jquery.min.js"></script>
    <script src="/static/component/layui/layui.js"></script>
    <script src="/static/component/pear/pear.js"></script>
    <script src="/static/user/js/jquery-ui.min.js"></script>
  
    <script>
            layui.use(['form', 'jquery', 'iconPicker'], function () {
            let form = layui.form;
            let $ = layui.jquery;

         


            form.on('submit(form-save)', function (data) {
                var data ={ids:_as};
                
                postData("{:url('basic/tcxhSave')}", data).then(function (res) {
                    if (res.code == 200) {
                        layer.msg(res.message, {
                            icon: 1,
                            time: 1000
                        }, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window
                                .name)); //关闭当前页
                            parent.layui.table.reload("tableId");
                        });
                    } else {
                        layer.msg(res.message, {
                            icon: 2,
                            time: 1000
                        });
                    }
                });
                return false;
            });
        })
        fixHelperModified = function(e, tr) {
                                    var $originals = tr.children();
                                    var $helper = tr.clone();
                                    $helper.children().each(function(index) {
                                        $(this).width($originals.eq(index).width())
                                    });
                                    
                                    return $helper;
                                },
                                updateIndex = function(e, ui) {
                                    $('td.serial', ui.item.parent()).each(function (i) {
                                        $(this).html(i + 1);
                                    });
                                };

                                $("#pxtbodyId").sortable({ 
                                        helper: fixHelperModified,
                                        stop: pxsl
                                    }).disableSelection();            
         
                                 
         function pxsl(){
            _as="";
            $(".tr_classl").each(function(i){
                _as+=$(this).data("id")+",";
                $(this).find("td").eq(0).html(i+1);
            });  
         }  
         
         
    </script>
    {include file="base/unitjs"}
</body>

</html>